<template>
  <div
    class="left"
    v-if="cfg.WebSite_Logo"
    :style="{ backgroundImage: 'url(' + cfg.WebSite_Logo + ')' }"
  ></div>
  <div class="left" v-else>{{ cfg.WebSite_Name }}</div>
  <!-- <img src="" /> -->
  <div class="right">
    <el-dropdown @visible-change="chg">
      <div class="username">
        <el-icon size="1.5em"><User /></el-icon>
        <span>{{ store.user.userInfo.username }}</span>
        <el-icon size="1em">
          <CaretBottom />
        </el-icon>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="geRenXinXi">个人信息</el-dropdown-item>
          <el-dropdown-item @click="xiuGaiMiMa">修改密码</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <div class="logout" @click="logout">
      <el-icon size="1.25em"><SwitchButton /></el-icon>
      <span>退出</span>
    </div>

    <edit-form ref="editfrom"></edit-form>
    <change-password ref="changepassword"></change-password>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import EditForm from '@/views/system/account/Edit.vue'
import ChangePassword from '@/views/system/account/ChangePassword.vue'
import { useAuthStore } from '@/stores/user'
import { useTabsStore } from '@/stores/tabs'
import router from '@/router/index'
import { useConfigStore } from '@/stores/syscfg'

const cfg = useConfigStore().cfg.config
const store = useAuthStore()
const tabStore = useTabsStore()

let editfrom = ref()
let changepassword = ref()

let arrorDown = true
const chg = (r) => {
  arrorDown = r
}
function logout() {
  ElMessageBox.confirm('您确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      store.setAuth(false)
      store.setUser()
      store.setPermission()
      store.setToken()
      tabStore.handleCloseAll()
      ElMessage({ type: 'success', message: '退出登录成功' })
      router.replace({
        path: '/login'
      })
    })
    .catch((e) => console.log('取消登出'))
}

function geRenXinXi() {
  let userId = store.user.userInfo.userid
  editfrom.value.open(userId, null)
}

function xiuGaiMiMa() {
  let userId = store.user.userInfo.userid
  changepassword.value.open(userId)
}
</script>

<style scoped>
.left {
  height: 60px;
  background-repeat: no-repeat;
  /* background-image: url('https://qjjl.scjg.work:9234/images/logo_qiye.png'); */
  border: 1px solid rgb(12, 42, 78);
  max-width: 1440px;
  width: 70vw;
  min-width: 480px;
  line-height: 30px;
  color: #efefef;
  font-size: 30px;
  padding: 14px 20px;
  font-weight: bold;
  font-family: '宋体', serif;
}
.right {
  display: flex;
  width: 250px;
}
.username {
  cursor: pointer;
}
.username span {
  height: 60px;
  line-height: 60px;
  color: #ccc;
  vertical-align: top;
  margin: 0 10px;
}
.username .el-icon {
  line-height: 60px;
  height: 60px;
  color: #ccc;
  vertical-align: top;
}
.username:focus-visible {
  outline: none;
}
.logout {
  margin: 0 25px;
  cursor: pointer;
}
.logout span {
  cursor: pointer;
  height: 60px;
  line-height: 60px;
  color: #ccc;
  vertical-align: top;
  margin: 0 10px;
}
.logout .el-icon {
  line-height: 60px;
  height: 60px;
  color: #ccc;
  vertical-align: top;
}
</style>
